<template>
	<view class="component">
		<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
			<view class="list">
				<view class="list-item flex-row-center" v-for="item in list" :key="item.id" @click="toDetail(item)">
					<text>浏览内容:</text>
					<text class="ellipsis">{{item.module}}</text>
					<text>{{item.create_time_text}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			contactInfo:{
				type:Object,
				default:{}
			},
			type:{
				type:String,
				required:true
			}
		},
		data() {
			return {
				list:[],
				currentPage:1,
				pageSize:20,
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '加载中'
				})
				const reqData = {
					client_id: this.contactInfo.client.id,
					page:this.currentPage,
					limit:this.pageSize,
				}
				let res = await this.$api.contactRecord(reqData)
				if(res.data.status == 200) {
					uni.hideLoading();
					let list= res.data.data.data || [];
					this.list = this.list.concat(list);
					this.currentPage = res.data.data.current_page||1;
					this.pageSize =  res.data.data.per_page||20;
					this.total = res.data.data.total;
				}
			},
			loadMore() {
				if(this.total > this.pageSize * this.currentPage){
					this.currentPage += 1;
					this.getList();
				}
			},
			
			toDetail(item) {
				this.$Router.push({name:"recordDetail",query:{id:item.id,customer:this.contactInfo.client.id,type:this.type}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.component {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.scroll {
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.list {
		padding: 0 20rpx;
		.list-item {
			padding: 30rpx 20rpx;
			border-bottom: 2rpx solid #EFEFEF ;
			text {
				font-size: 28rpx;
				&:nth-child(2) {
					width: 300rpx;
					margin-left: 30rpx;
				}
				&:nth-child(3) {
					margin-left: auto;
				}
			}
		}
	}
</style>